<template>
  <div class="app-container"
       v-loading="allloading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm">
        <el-form-item label="统计时间：" label-width="100px" style="width: 600px;float: left">
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.start_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择开始时间">
          </el-date-picker>
          <div style="float: left;margin: 0 10px">至</div>
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.end_time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" style="margin-left: 10px" icon="el-icon-search" @click="Query">查询
        </el-button>
      </el-form>
    </div>

    <div style="display: flex">
      <div v-show="!allloading" style="width: 55%;margin-right: 1%">
        <p>销售能力</p>
        <el-table :data="list" element-loading-text="Loading" max-height="390"
                  style="min-height: 390px" border fit highlight-current-row header-cell-class-name="tableheader">
          <el-table-column prop="u_name" label="销售经理" width="100px;" fixed>
            <template slot-scope="scope">
              <i class="el-icon-s-custom"></i> {{ scope.row.u_name }}
            </template>
          </el-table-column>
          <el-table-column prop="total_intended_count" label="创建客户数量" sortable width="140px;">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.total_intended_count }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="no_alert" label="未触发提醒" width="120px;">>
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.no_alert }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="up_standard" label="回访达标" sortable width="120px;">>
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.up_standard }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="no_up_standard" label="回访未达标" sortable width="120px;">>
            <template slot-scope="scope">
              <el-tag type="danger">{{ scope.row.no_up_standard }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="return_visit_count" label="总回访次数" sortable width="120px;">>
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.return_visit_count }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="have_tel" label="有电话" width="100px;">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.have_tel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="no_tel" label="无电话" width="100px;">
            <template slot-scope="scope">
              <el-tag type="danger">{{ scope.row.no_tel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tel_rate" label="有效率" sortable width="100px;">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.tel_rate.toFixed(2) }}%</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="deal_count" label="成单数量" sortable width="100px;">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.deal_count }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="deal_rate" label="成交率" sortable width="100px;">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.deal_rate.toFixed(2) }}%</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 44%;text-align: center">
        <div style="width: 100%;height: 270px" id="intentionbar"></div>
        <div v-show="!allloading">
          <div style="font-weight: 800">能力正排名</div>
          <div style="display: flex;justify-content: space-between">
            <div style="width: 23%">
              <p>成交率</p>
              <p style="display: flex;justify-content: space-between" v-for="(item,index) in salearr.deal_rate_rank">
                <span style="width: 25%" v-if="index===0">金</span>
                <span style="width: 25%" v-else-if="index===1">银</span>
                <span style="width: 25%" v-else-if="index===2">铜</span>
                <span style="width: 40%">{{ item.u_name }}</span>
                <span style="width: 35%">{{ item.deal_rate.toFixed(2) }}%</span>
              </p>
            </div>
            <div style="width: 23%">
              <p>成单数量</p>
              <p style="display: flex;justify-content: space-between" v-for="(item,index) in salearr.deal_count">
                <span style="width: 25%" v-if="index===0">金</span>
                <span style="width: 25%" v-else-if="index===1">银</span>
                <span style="width: 25%" v-else-if="index===2">铜</span>
                <span style="width: 40%">{{ item.u_name }}</span>
                <span style="width: 35%">{{ item.deal_count }}</span>
              </p>
            </div>
            <div style="width: 23%">
              <p>创建客户</p>
              <p style="display: flex;justify-content: space-between" v-for="(item,index) in salearr.create_count">
                <span style="width: 25%" v-if="index===0">金</span>
                <span style="width: 25%" v-else-if="index===1">银</span>
                <span style="width: 25%" v-else-if="index===2">铜</span>
                <span style="width: 40%">{{ item.u_name }}</span>
                <span style="width: 35%">{{ item.total_count }}</span>
              </p>
            </div>
            <div style="width: 23%">
              <p>总回访次数</p>
              <p style="display: flex;justify-content: space-between" v-for="(item,index) in salearr.return_count">
                <span style="width: 25%" v-if="index===0">金</span>
                <span style="width: 25%" v-else-if="index===1">银</span>
                <span style="width: 25%" v-else-if="index===2">铜</span>
                <span style="width: 40%">{{ item.u_name }}</span>
                <span style="width: 35%">{{ item.return_count }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative">
      <el-radio-group v-show="!allloading" style="position: absolute;top: 0;right: 0;z-index: 1"
                      v-model="totalsearch_type" size="mini">
        <el-radio-button label="1">创建客户数量</el-radio-button>
        <el-radio-button label="2">有电话</el-radio-button>
        <el-radio-button label="3">回访客户</el-radio-button>
        <el-radio-button label="4">成单数量</el-radio-button>
      </el-radio-group>
      <div style="width: 100%;height: 220px" id="allline"></div>
    </div>
    <div style="position: relative">
      <el-radio-group v-show="!allloading" style="position: absolute;top: 0;right: 0;z-index: 1"
                      v-model="powersearch_type" size="mini">
        <el-radio-button label="1">创建客户数量</el-radio-button>
        <el-radio-button label="2">有电话</el-radio-button>
        <el-radio-button label="3">回访客户</el-radio-button>
        <el-radio-button label="4">成单数量</el-radio-button>
      </el-radio-group>
      <div style="width: 100%;height: 220px" id="saleline"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {Loading} from 'element-ui';

var intentionbarChart
var alllineChart
var salelineChart

export default {
  data() {
    return {
      allloading: true,
      QueryForm: {
        start_time: '',
        end_time: '',
      },
      totalsearch_type: '1',
      powersearch_type: '1',
      list: [],
      salearr: [],
      intentionbar_data: {},
      allline_data: {},
      saleline_data: {},
    };
  },
  watch: {
    totalsearch_type(val) {
      this.$get(this.$api + '/RK/total_company_echart', {
        start_time: this.QueryForm.start_time,
        end_time: this.QueryForm.end_time,
        search_type: val,
      })
        .then((res) => {
          this.allline_data = res.data
          this.alllineEcharts()
        })
    },
    powersearch_type(val) {
      this.$get(this.$api + '/RK/power_by_sale_echart', {
        start_time: this.QueryForm.start_time,
        end_time: this.QueryForm.end_time,
        search_type: val,
      })
        .then((res) => {
          this.saleline_data = res.data
          this.salelineEcharts()
        })
    },
  },
  created() {
    this.Query()


    /*var arr = []
    for (var i = 2; ; i++) {
      var iszhishu = true;
      for (var j = 2; j < i; j++) {
        if (i % j === 0) {
          iszhishu = false;
        }
      }
      if (iszhishu) {
        arr.push(i)
      }
      if (arr.length === 100) {
        break
      }
    }
    console.log(arr);

    var array = [10, 20, 9, 8, 79, 65, 100];
    //比较轮数
    for (var i = 0; i < array.length - 1; i++) {
      //每轮比较次数，次数=长度-1-此时的轮数
      for (var j = 0; j < array.length - 1 - i; j++) {
        if (array[j] > array[j + 1]) {
          var temp = array[j];
          array[j] = array[j + 1];
          array[j + 1] = temp;
        } //end if
      }//end for 次数
    } //end for 轮数
    console.log(array);*/

  },
  methods: {
    Query() {
      this.allloading = true
      if (intentionbarChart != null && intentionbarChart !== "" && intentionbarChart !== undefined) {
        intentionbarChart.dispose();
      }
      if (alllineChart != null && alllineChart !== "" && alllineChart !== undefined) {
        alllineChart.dispose();
      }
      if (salelineChart != null && salelineChart !== "" && salelineChart !== undefined) {
        salelineChart.dispose();
      }
      axios.all([this.get_sale_customer_list(), this.get_sale_source_echart(), this.get_top3_rank(), this.total_company_echart(), this.power_by_sale_echart()])
        .then(
          axios.spread((list_res, intentionbar_data_res, salearr_res, allline_data_res, saleline_data_res) => {
            this.allloading = false
            if (list_res.code === 0) {
              this.list = list_res.data
            }
            if (intentionbar_data_res.code === 0) {
              this.intentionbar_data = intentionbar_data_res.data.source
              this.intentionbarEcharts()
            }
            if (salearr_res.code === 0) {
              this.salearr = salearr_res.data
            }
            if (allline_data_res.code === 0) {
              this.allline_data = allline_data_res.data
              this.alllineEcharts()
            }
            if (saleline_data_res.code === 0) {
              this.saleline_data = saleline_data_res.data
              this.salelineEcharts()
            }
          })
        )
        .catch((error) => {
          console.log(error);
        })
    },
    intentionbarEcharts() {
      if (intentionbarChart != null && intentionbarChart !== "" && intentionbarChart !== undefined) {
        intentionbarChart.dispose();
      }
      intentionbarChart = this.$echarts.init(document.getElementById('intentionbar'));
      intentionbarChart.clear()
      intentionbarChart.off('click') // 如果不加off事件，就会叠加触发
      intentionbarChart.showLoading({
        text: '正在努力的读取数据中...'
      });
      let intentionbaroption = {
        title: {
          text: '成单来源统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        grid: {
          top: '12%',
          left: '7%',
          right: '1%',
        },
        xAxis: [
          {
            type: 'category',
            data: this.intentionbar_data.echart_names,
            axisLabel: {//坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: 0,// 文字倾斜度
              formatter: function (params) {
                var show_str = "";
                for (var i in params.split(' ')) {
                  show_str += params.split(' ')[i] + '\n';
                }
                return show_str;
              }
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              formatter: function (a) {
                a = +a;
                return a;
              }
            }
          }
        ],
        series: this.intentionbar_data.echart_series
      }
      intentionbarChart.on('click', function (params) {
        console.log(params);
      })
      intentionbarChart.hideLoading()
      intentionbarChart.setOption(intentionbaroption);
    },
    alllineEcharts() {
      if (alllineChart != null && alllineChart !== "" && alllineChart !== undefined) {
        alllineChart.dispose();
      }
      alllineChart = this.$echarts.init(document.getElementById('allline'));
      alllineChart.clear();
      alllineChart.off('click') // 如果不加off事件，就会叠加触发
      alllineChart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const alllineoption = {
        title: {
          text: '公司整体咨询成单波动',
          top: 10,
          left: 'center',
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 40,
          x2: 10,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.allline_data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        series: this.allline_data.series
      };
      alllineChart.on('click', function (params) {
        console.log(params);
      })
      alllineChart.hideLoading()
      alllineChart.setOption(alllineoption);
    },
    salelineEcharts() {
      if (salelineChart != null && salelineChart != "" && salelineChart != undefined) {
        salelineChart.dispose();
      }
      salelineChart = this.$echarts.init(document.getElementById('saleline'));
      salelineChart.clear();
      salelineChart.off('click') // 如果不加off事件，就会叠加触发
      salelineChart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const salelineoption = {
        title: {
          text: '销售客服咨询成单波动',
          top: 10,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.saleline_data.legend_data,
          top: '90%',
          left: 'center'
        },
        grid: {
          x: 40,
          x2: 10,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.saleline_data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        series: this.saleline_data.series
      };
      salelineChart.on('click', function (params) {
        console.log(params);
      })
      salelineChart.hideLoading()
      salelineChart.setOption(salelineoption);
    },
    get_sale_customer_list() {
      return this.$get(this.$api + '/RK/get_sale_customer_list', this.QueryForm)
    },
    get_sale_source_echart() {
      return this.$get(this.$api + '/RK/get_sale_source_echart', this.QueryForm)
    },
    get_top3_rank() {
      return this.$get(this.$api + '/RK/get_top3_rank', this.QueryForm)
    },
    total_company_echart() {
      return this.$get(this.$api + '/RK/total_company_echart', {
        start_time: this.QueryForm.start_time,
        end_time: this.QueryForm.end_time,
        search_type: this.totalsearch_type,
      })
    },
    power_by_sale_echart() {
      return this.$get(this.$api + '/RK/power_by_sale_echart', {
        start_time: this.QueryForm.start_time,
        end_time: this.QueryForm.end_time,
        search_type: this.powersearch_type,
      })
    },
  },
}
</script>

<style scoped>
.app-container {
  min-height: calc(100vh - 60px);
}
</style>
<style>
.el-table .sort-caret.descending {
  border-top-color: #ffffff !important;
}

.el-table .sort-caret.ascending {
  border-bottom-color: #ffffff !important;
}
</style>
